<script>
export default {
  name: "MendianComponent",
  data: function () {
    return {
      allMendian: {},
      list:"",
      radio1: "全部商品",
      mendianname:"",
      mendianphone:"",
      value1: "",
      input:"",
      dialogVisible: false,
      visible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1:false,
      form: {
        name: '',
        time:'',
        phone:'',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      mendianList: {},
      isSelected: 0,
      addressAll: [],   //省市区
      address: [], //你选择的地址
      newAddress:"",
      newAddress1:"",
      newAddress2:"",
      imageUrl: "",

      addTime: "",
      concernStatus : "",
      distance : "",
      salesVolume : "",
      shopAccount : "",
      shopAddress : "",
      shopCategoryList : "",
      shopCity : "",
      shopCommunitySort : "",
      shopDescribe : "",
      shopDistrict : "",
      shopGoodsList : "",
      shopId : "",
      shopImage : "",
      shopLatitude: "",
      shopLongitude: "",
      shopName : "",
      shopOrderCount: "",
      shopPassword: "",
      shopPhone : "",
      shopProvince : "",
      shopSort : "",
      shopStatus : "",
      shopUserId : "",
    }
  },
  created() {//默认请求全部商品
    this.getAllProvinceAndCityList();
    this.axios.request("/shop/querySearchShopList", {
      params: {
        pageNum: 1,
        pageSize: 10,
        phone: "",
        keyword: "",
        shopStatus: "",
        startTime: "",
        endTime: ""
      }
    }).then((res) => {

      this.allMendian = res.data.data;
      this.list = this.allMendian.list;
      console.log(
          this.allMendian
      )
    }).catch((err) => {

    })
  },
  methods:{
    //获取省市
    getAllProvinceAndCityList() {
      // 获取全国所有省份和城市的列表
      var that = this;
      this.$http
          .get("https://restapi.amap.com/v3/config/district", {
            // 高德地图的API
            params: {
              key: "3718d3a2ce2194dab90baaa856a219a7", // 这个是申请的 Key，读者自行写入
              keywords: "中国",
              subdistrict: 3,
              extensions: "base",
            },
          })
          .then((response) => {
            console.log(response.data)
            for(let i = 0;i<response.data.districts[0].districts.length;i++){
              let provinceMap = new Map();
              provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
              provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
              provinceMap.children = [];
              that.addressAll.push(provinceMap);  //添加省份
              for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                let cityMap = new Map()
                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                cityMap.children = [];
                provinceMap.children.push(cityMap); //添加市
                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                  let areaMap = new Map()
                  areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                  areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                  cityMap.children.push(areaMap);   //添加区县
                }
              }
            }
          });
    },
    getAddress(){
      this.axios.request("https://restapi.amap.com/v3/geocode/geo", {params:{
          key:"457886b5972a97e93fb9cdccebfd450f",
          address:this.address.join('')
        }}).then((res)=>{
        console.log(this.address.join(''));
        this.newAddress = res.data.geocodes[0].location;
        this.newAddress1 = this.newAddress.split(",")[0];
        this.newAddress2 = this.newAddress.split(",")[1];
      }).catch((err)=>{
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    currentChange(page){
      this.currentPage = page;
      this.pageChange();
    },
    pageChange(){
      this.axios.request("/shop/querySearchShopList", {params:{
          pageNum: this.currentPage,
          pageSize: 10,
          phone:"",
          keyword:"",
          shopStatus:"",
          startTime:"",
          endTime:"",
    }}).then((res)=>{
        this.allMendian = res.data.data;
        this.list = this.allMendian.list;
        console.log(this.allMendian);
      }).catch((err)=>{
      })
    },
    search(){
      console.log(this.value1);
      this.axios.request("/shop/querySearchShopList", {params:{
          pageNum: 1,
          pageSize: 10,
          phone: this.mendianphone,
          keyword: this.mendianname,
          shopStatus: "",
          startTime:this.value1[0],
          endTime:this.value1[1],
        }}).then((res)=>{
        this.allMendian = res.data.data;
        this.list = this.allMendian.list;
        console.log(
            this.allMendian
        )
      }).catch((err)=>{
      });
    },
    newAddMendian() {
      this.dialogFormVisible = false;
      /*this.axios.post("/qiniu/getQiniuUploadToken", {
        fileName: this.imageUrl,

      }).then((res) => {
        console.log(1111)
      }).catch((err) => {
      })*/
      this.axios.post("/shop/addShop", {
        shopAddress: this.address + this.input,
        shopCity: this.address[1],
        shopDescribe: this.form.time,
        shopDistrict: this.address[2],
        shopImage: this.imageUrl,
        shopLatitude: this.newAddress2,
        shopLongitude: this.newAddress1,
        shopName: this.form.name,
        shopPhone: this.form.phone,
        shopProvince: this.address[0]
      }).then((res) => {
        console.log(1111)
      }).catch((err) => {
      })
    },
    handleClick1(row){
      this.address=[];
      this.dialogFormVisible1 = true;
      this.addTime = row.addTime;
      this.concernStatus = row.concernStatus;
      this.distance = row.distance;
      this.salesVolume = row.salesVolume;
      this.shopAccount = row.shopAccount;
      this.shopAddress = row.shopAddress;
      this.shopCategoryList = row.shopCategoryList;
      this.shopCity = row.shopCity;
      this.shopCommunitySort = row.shopCommunitySort;
      this.shopDescribe = row.shopDescribe;
      this.shopDistrict = row.shopDistrict;
      this.shopGoodsList = row.shopGoodsList;
      this.shopId = row.shopId;
      this.shopImage = row.shopImage;
      this.shopLatitude = row.shopLatitude;
      this.shopLongitude = row.shopLongitude;
      this.shopName = row.shopName;
      this.shopOrderCount = row.shopOrderCount;
      this.shopPassword = row.shopPassword;
      this.shopPhone = row.shopPhone;
      this.shopProvince = row.shopProvince;
      this.shopSort = row.shopSort;
      this.shopStatus = row.shopStatus;
      this.shopUserId = row.shopUserId;

      this.input = row.shopAddress;
      this.newAddress2 = row.shopLatitude;
      this.newAddress1 = row.shopLongitude;
      this.form.name = row.shopName;
      this.form.phone = row.shopPhone;
      this.imageUrl = row.shopImage;
      this.form.time = row.shopDescribe;
      this.address.push(this.shopProvince);
      this.address.push(this.shopCity) ;
      this.address.push(this.shopDistrict);
    },
    updateMendian(){
      this.dialogFormVisible1 = false;
      console.log(this.shopId);
      this.axios.post("/shop/modifyShop", {
        addTime: this.addTime,
        concernStatus : this.concernStatus,
        distance : this.distance,
        salesVolume : this.salesVolume,
        shopAccount : this.shopAccount,
        shopAddress : this.address + this.input,
        shopCategoryList : this.shopCategoryList,
        shopCity : this.address[1],
        shopCommunitySort : this.shopCommunitySort,
        shopDescribe : this.form.time,
        shopDistrict : this.address[2],
        shopGoodsList : this.shopGoodsList,
        shopId : this.shopId,
        shopImage : this.shopImage,
        shopLatitude: this.newAddress2,
        shopLongitude: this.newAddress1,
        shopName : this.form.name,
        shopOrderCount: this.shopOrderCount,
        shopPassword: this.shopImage,
        shopPhone :  this.form.phone,
        shopProvince : this.address[0],
        shopSort : this.shopCommunitySort,
        shopStatus : this.shopStatus,
        shopUserId : this.shopUserId,
      }).then((res)=>{

      }).catch((err)=>{
      })
    },
    popmendian(row){
      this.$router.push({path:"/mendianguanli",query:row}).catch(()=>{});
    }
  }
}
</script>

<template>
  <div class="mendian">

    <div class="shangjia">
      <el-radio-group v-model="radio1" @input="goodsStatusChange">
        <el-radio-button label="全部商品"></el-radio-button>
        <el-radio-button label="上架中"></el-radio-button>
        <el-radio-button label="已下架"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="searchLi">
      <span class="serachLabel">门店名称：</span>
      <input v-model="mendianname" type="text" class="el-input__inner" style="width: 200px">
      <span  class="serachLabel">门店手机号：</span>
      <input v-model="mendianphone" type="text" class="el-input__inner" style="width: 200px">
      <span class="demonstration">提交日期：</span>
      <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button id="btn1" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <div>
        <el-button id="btn2" type="primary" @click="dialogFormVisible = true">新增门店</el-button>
      </div>
      <el-dialog width="850px" title="门店新增" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="门店名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="门店头像" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="true"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="门店手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属地区" :label-width="formLabelWidth">
            <el-cascader
                :options="addressAll"
                clearable
                v-model="address"
                :props="{value:'label'}"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-input v-model="input" placeholder="请填写详细地址"></el-input>
          </el-form-item>
          <el-form-item label="门店坐标" :label-width="formLabelWidth">
            <el-button @click="getAddress">获取坐标</el-button>
            <span>{{newAddress2+","+ newAddress1}}</span>
          </el-form-item>
          <el-form-item label="营业时间" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-button @click="newAddMendian" style="margin-left: 700px">保存</el-button>
        </el-form>
      </el-dialog>
      <el-dialog width="850px" title="修改门店资料" :visible.sync="dialogFormVisible1">
        <el-form :model="form">
          <el-form-item label="门店名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="门店头像" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="true"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="门店手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属地区" :label-width="formLabelWidth">
            <el-cascader
                :options="addressAll"
                clearable
                v-model="address"
                :props="{value:'label'}"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-input v-model="input" placeholder="请填写详细地址"></el-input>
          </el-form-item>
          <el-form-item label="门店坐标" :label-width="formLabelWidth">
            <el-button @click="getAddress">获取坐标</el-button>
            <span>{{newAddress2+","+ newAddress1}}</span>
          </el-form-item>
          <el-form-item label="营业时间" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-button @click="updateMendian" style="margin-left: 700px">保存</el-button>
        </el-form>
      </el-dialog>
    </div>
    <div class="content">
      <el-table
          :data="list"
          border
          style="width: 1010px"
          :header-cell-style="{'background-color': '#409EFF', color:'#fff'}">
        <el-table-column
            fixed
            prop="shopName"
            label="门店"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopId"
            label="id"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopPhone"
            label="门店手机号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopAddress"
            label="门店地址"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopDescribe"
            label="营业时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopCommunitySort"
            label="关联小区"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopOrderCount"
            label="订单总数"
            width="100">
        </el-table-column>
        <el-table-column
            prop="distance"
            label="提交方式"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shopStatus"
            label="状态"
            width="100">
          <template slot-scope="scope">
            {{ scope.row.shopStatus === 1 ? '上架中' : '已下架' }}
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="popmendian(scope.row)" type="text" size="small">门店管理</el-button>
            <el-button type="text" size="small" @click="handleClick1(scope.row)">修改门店资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :total="this.allMendian.total"
            @current-change= "currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
.mendian {
  height: 300px;
  /*background-color: green;*/
}

.shangjia {
  margin-bottom: 20px;
}

#btn1 {
  margin-left: 20px;
}

#btn2 {
  margin-top: 30px;
  margin-bottom: 15px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>